<template>
    <a-row :gutter="10">
        <a-col :md="leftColMd" :sm="24" style="margin-bottom: 20px">
            <a-card :bordered="false">
                <!-- 查询区域 -->
                <div class="table-page-search-wrapper">
                    <!-- 搜索区域 -->
                    <a-form layout="inline" @keyup.enter.native="searchQuery">
                        <a-row :gutter="24">
                            <a-col :md="12" :sm="8">
                                <a-form-item label="收运人姓名" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
                                    <a-input placeholder="" v-model="queryParam.realname"></a-input>
                                </a-form-item>
                            </a-col>
                            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                            <a-col :md="12" :sm="24">
                               <a-button type="primary" @click="searchQuery" icon="search"
                                         style="margin-left: 21px">查询</a-button>
                              <a-button type="primary" @click="searchReset" icon="reload"
                                        style="margin-left: 8px">重置</a-button>
                            </a-col>
                          </span>
                        </a-row>
                    </a-form>
                </div>

                <div style="margin-top: 15px">
                    <a-table
                            style="height:500px"
                            ref="table"
                            size="middle"
                            bordered
                            rowKey="id"
                            :columns="columns"
                            :dataSource="dataSource"
                            :pagination="ipagination"
                            :loading="loading"
                            :rowSelection="{selectedRowKeys: selectedRowKeys1, onChange: onSelectChange1, type:'radio'}"
                            @change="handleTableChange">
                          <span slot="action" slot-scope="text, record">
                                <a @click="handleOpen(record,1)">绑定机构</a>
                                <a-divider type="vertical"/>
                                <a @click="handleOpen(record,2)">绑定车辆</a>
                            </span>
                    </a-table>
                </div>
            </a-card>
        </a-col>

        <!-- 收运员绑定的医疗机构模块 -->
        <a-col :md="rightColMd" :sm="24" v-if="this.rightcolval == 1">
            <a-card :bordered="false">
                <div style="text-align: right;">
                    <a-icon type="close-circle" @click="hideRightList"/>
                </div>
                <!-- 查询区域 -->
                <div class="table-page-search-wrapper">
                    <a-form layout="inline" @keyup.enter.native="searchQuery2">
                        <a-row :gutter="24">
                            <a-col :md="10" :sm="12">
                                <a-form-item label="机构编码">
                                    <a-input placeholder="" v-model="queryParam2.customerNumber"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :md="10" :sm="12">
                                <a-form-item label="机构名称">
                                    <a-input placeholder="" v-model="queryParam2.customerName"></a-input>
                                </a-form-item>
                            </a-col>
                            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                            <a-col :md="9" :sm="24">
                             <a-button type="primary" @click="searchQuery2" icon="search"
                                       style="margin-left: 21px">查询</a-button>
                            </a-col>
                          </span>
                        </a-row>
                    </a-form>
                </div>

                <!-- 操作按钮区域 -->
                <div class="table-operator" :md="24" :sm="24">
                    <a-button @click="handleAdd2" type="primary" icon="plus" style="margin-top: 16px">
                        绑定机构
                    </a-button>
                </div>
                <!-- table区域-begin -->
                <div>
                    <a-table
                            style="height:500px"
                            ref="table2"
                            bordered
                            size="middle"
                            rowKey="id"
                            :columns="columns2"
                            :dataSource="dataSource2"
                            :pagination="ipagination2"
                            :loading="loading2"
                            @change="handleTableChange2">
                        <span slot="action" slot-scope="text, record">
                            <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete2(record.id)">
                              <a>删除</a>
                            </a-popconfirm>
                        </span>
                    </a-table>
                </div>
                <Select-customer-Modal ref="selectCustomerModal" @ok="loadData2(1)" ></Select-customer-Modal>
            </a-card>
        </a-col>

        <!-- 收运员绑定的车辆信息模块 -->
        <a-col :md="rightColMd" :sm="24" v-if="this.rightcolval == 2">
            <a-card :bordered="false">
                <div style="text-align: right;">
                    <a-icon type="close-circle" @click="hideRightList"/>
                </div>
                <!-- 操作按钮区域 -->
                <div class="table-operator" :md="24" :sm="24">
                    <a-button @click="handleAdd3" type="primary" icon="plus" style="margin-top: 16px">
                        绑定车辆
                    </a-button>
                </div>
                <div>
                    <a-table
                            style="height:500px"
                            ref="table2"
                            bordered
                            size="middle"
                            rowKey="id"
                            :columns="columns3"
                            :dataSource="dataSource3"
                            :pagination="ipagination3"
                            :loading="loading3"
                            @change="handleTableChange3">
                        <span slot="action" slot-scope="text, record">
                            <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete3(record.id)">
                              <a>删除</a>
                            </a-popconfirm>
                        </span>
                    </a-table>
                </div>
                <hc-car-user-modal ref="hcCarUserModelRef" @ok="loadData3(1)"></hc-car-user-modal>
            </a-card>
        </a-col>
    </a-row>
</template>
<script>
    import { JeecgListMixin } from '@/mixins/JeecgListMixin'
    import { deleteAction, getAction } from '@/api/manage'
    import SelectCustomerModal from './modules/SelectCustomerModal'
    import { filterObj } from '@/utils/util'
    import moment from 'moment'
    import HcCarUserModal from './modules/HcCarUserModal'

    export default {
        mixins: [JeecgListMixin],
        components: {
            HcCarUserModal,
            SelectCustomerModal,
            moment
        },
        data() {
            return {
                model1: {},
                currentUserId: '',
                queryParam2: {},
                dataSource2: [],
                ipagination2: {
                    current: 1,
                    pageSize: 10,
                    pageSizeOptions: ['10', '20', '30'],
                    showTotal: (total, range) => {
                        return range[0] + '-' + range[1] + ' 共' + total + '条'
                    },
                    showQuickJumper: true,
                    showSizeChanger: true,
                    total: 0
                },
                loading1: false,
                loading2: false,
                selectedRowKeys1: [],
                selectionRows1: [],
                rightcolval: 0,
                columns:
                    [
                        {
                            title: '登录账户',
                            align: 'center',
                            dataIndex: 'username'
                        },
                        {
                            title: '收运人',
                            align: 'center',
                            dataIndex: 'realname'
                        },
                        {
                            title: '所在区域',
                            dataIndex: 'address',
                            align: 'center',
                            customRender: (text, row) => {
                                return `${row.province || ''}${row.city || ''}${row.area || ''}`
                            }
                        },
                        {
                            title: '操作',
                            dataIndex: 'action',
                            align: 'center',
                            scopedSlots: { customRender: 'action' }
                        }
                    ],
                columns2: [
                    {
                        title: '机构编号',
                        align: 'center',
                        dataIndex: 'customerNumber',
                    },
                    {
                        title: '机构名称',
                        align: 'center',
                        dataIndex: 'customerName',
                    },
                    // {
                    //     title: '所在区域',
                    //     dataIndex: 'address',
                    //     align: 'center',
                    //     customRender: (text, row) => {
                    //         return `${row.province || ''}${row.city || ''}${row.area || ''}`
                    //     }
                    // },
                    {
                        title: '操作',
                        dataIndex: 'action',
                        align: 'center',
                        scopedSlots: { customRender: 'action' }
                    }
                ],

                // 高级查询参数
                superQueryParams2: '',
                // 高级查询拼接条件
                superQueryMatchType2: 'and',
                url: {
                    list: '/sys/user/getUserRoleListByCode',
                    list2: 'hc/hcRecyclerCustomer/list',
                    delete2: 'hc/hcRecyclerCustomer/delete',
                    list3: '/hc/hcCarUser/list'
                },

                loading3: false,
                queryParam3: {},
                dataSource3: [],
                ipagination3: {
                    current: 1,
                    pageSize: 10,
                    pageSizeOptions: ['10', '20', '30'],
                    showTotal: (total, range) => {
                        return range[0] + '-' + range[1] + ' 共' + total + '条'
                    },
                    showQuickJumper: true,
                    showSizeChanger: true,
                    total: 0
                },
                columns3: [
                    {
                        title: '编号',
                        align: 'center',
                        dataIndex: 'id'
                    },
                    {
                        title: '车牌号',
                        align: 'center',
                        dataIndex: 'carNumber'
                    },
                    {
                        title: '操作',
                        dataIndex: 'action',
                        align: 'center',
                        scopedSlots: { customRender: 'action' }
                    }
                ]
            }
        },
        computed: {
            leftColMd() {
                return this.selectedRowKeys1.length === 0 ? 24 : 12
            },
            rightColMd() {
                return this.selectedRowKeys1.length === 0 ? 0 : 12
            }
        },
        methods: {
            // 组件初始信息配置
            initDictConfig() {
                let roles = [
                    'CT_recycler',
                    'CT_carrier',
                    'hc_collector',
                ]
                this.queryParam.roleCode = roles.join(',')

                // 根据当前用户去查询
                let userInfo = this.$store.getters.userInfo
                if (userInfo.companysId) {
                    this.queryParam.companysId = userInfo.companysId;
                    this.queryParam2.companysId = userInfo.companysId;
                    this.queryParam3.companysId = userInfo.companysId;
                }
            },
            hideRightList() {
                this.selectedRowKeys1 = []
            },
            onSelectChange1(selectedRowKeys, selectionRows) {
                this.rightcolval = 1
                this.selectedRowKeys1 = selectedRowKeys
                this.selectionRows1 = selectionRows
                this.model1 = Object.assign({}, selectionRows[0])
                this.currentUserId = selectedRowKeys[0]
                this.loadData2()
            },
            // 左边操作模块点击事务
            handleOpen(record, type = 1) {
                this.rightcolval = type
                this.selectedRowKeys1 = [record.id]
                this.model1 = Object.assign({}, record)
                this.currentUserId = record.id
                if (type == 2) {
                    this.loadData3(1)
                } else {
                    this.loadData2(1)
                }
            },
            // 重置查询
            searchReset(){
                this.queryParam.realname = ''
                this.loadData()
            },

            /**
             * ------------------------------------------------------------------------------------
             * 【收运人】绑定医疗机构信息
             * ------------------------------------------------------------------------------------
             * @returns {*}
             */
            handleAdd2() {
                if (this.currentUserId == '') {
                    this.$message.error('请选择一个角色!')
                } else {
                    let ref = this.$refs.selectCustomerModal;
                    if (ref) {
                        let user = this.model1;
                        ref.show(user);
                    }
                }
            },
            searchQuery2() {
                this.loadData2(1)
            },
            handleTableChange2(pagination, filters, sorter) {
                this.ipagination2 = pagination
                this.loadData2()
            },
            getQueryParams2() {
                //获取查询条件
                let sqp = {}
                var param = Object.assign(sqp, this.queryParam2)
                param.pageNo = this.ipagination2.current
                param.pageSize = this.ipagination2.pageSize
                return filterObj(param)
            },
            loadData2(arg) {
                if (!this.url.list2) {
                    this.$message.error('请设置url.list2属性!')
                    return
                }
                //加载数据 若传入参数1则加载第一页的内容
                if (arg === 1) {
                    this.ipagination2.current = 1
                }
                if (this.currentUserId === '') return
                let params = this.getQueryParams2();
                // 收运人信息
                params['recyclePersonId'] = this.currentUserId;

                this.loading2 = true
                getAction(this.url.list2, params).then((res) => {
                    if (res.success) {
                        this.dataSource2 = res.result.records
                        this.ipagination2.total = res.result.total
                    }
                    this.loading2 = false
                })
            },
            handleDelete2(id) {
                var that = this
                deleteAction(this.url.delete2, { id: id }).then((res) => {
                    if (res.success) {
                        that.$message.success(res.message)
                        this.loadData2()
                    } else {
                        that.$message.warning(res.message)
                    }
                })
            },
            /**
             * ------------------------------------------------------------------------------------
             * 【收运人】绑定车辆信息模块
             * ------------------------------------------------------------------------------------
             * @returns {*}
             */
            getQueryParams3() {
                //获取查询条件
                let sqp = {}
                var param = Object.assign(sqp, this.queryParam3)
                param.pageNo = this.ipagination3.current
                param.pageSize = this.ipagination3.pageSize
                return filterObj(param)
            },
            loadData3(arg) {
                if (!this.url.list3) {
                    this.$message.error('请设置url.list3属性!')
                    return
                }
                //加载数据 若传入参数1则加载第一页的内容
                if (arg === 1) {
                    this.ipagination3.current = 1
                }
                if (this.currentUserId === '') return
                let params = this.getQueryParams3()
                // 车辆绑定的收运员
                params['carUserId'] = this.currentUserId
                this.loading3 = true
                getAction(this.url.list3, params).then((res) => {
                    if (res.success) {
                        this.dataSource3 = res.result.records
                        this.ipagination3.total = res.result.total
                    }
                    this.loading3 = false
                })
            },
            handleTableChange3(pagination, filters, sorter) {
                //分页、排序、筛选变化时触发
                this.ipagination3 = pagination
                this.loadData3()
            },
            handleAdd3(item) {
                let ref = this.$refs.hcCarUserModelRef
                if (ref) {
                    if (item) {
                        ref.edit(item, this.currentUserId)
                    } else {
                        ref.add(this.currentUserId)
                    }
                }
            },
            handleDelete3(id) {
                var that = this
                deleteAction('/hc/hcCarUser/delete', { id: id }).then((res) => {
                    if (res.success) {
                        that.$message.success(res.message)
                        this.loadData3()
                    } else {
                        that.$message.warning(res.message)
                    }
                })
            }

        }
    }
</script>
<style scoped>
    /** Button按钮间距 */
    .ant-btn {
        margin-left: 8px
    }
</style>
